<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-button type="text" @click="dialogVisible = true" style="font-size: 2vw;">{{value}}</el-button>
        <el-dialog
        :visible.sync="dialogVisible"
        width="90%"
        :before-close="handleClose">
            <span>选择日期</span>
            <!-- 日期选择器 -->
            <el-cascader
            v-model="value1"
            :options="options"
            @change="handleChangeDate">
            </el-cascader>
            <br/> <br/>
            <!-- 时间选择器 -->
            <span>选择时间</span>
            <el-time-select
            v-model="value2"
            :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00'
            }"
            placeholder="选择时间"
            @change="handleChangeTime">
            </el-time-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
        el: '#app',
        data: function() {
            return { 
                dialogVisible: false ,
                options: [],
                value: '',
                value1: '',
                value2: '',
            }
        },
        created(){
            let now = new Date();
            let year = now.getFullYear(); // 年
            let month = now.getMonth() + 1; // 月
            let day = now.getDate(); // 日
            this.value = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            handleChangeDate(value1) {
                console.log(value1);
                this.value = value1[0]
            },
            handleChangeTime(value2){
                console.log(value2)
            }
        },
        mounted(){
            for (let i = 1; i < 8; i++) {
                let now = new Date();
                let date = new Date(now.setDate(now.getDate() + i));
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                let day = date.getDate(); // 日
                let text = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
                this.options.push({value:text,label:text})
            }
        }
    })
  </script>
</html>